<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>弹幕</title>
    <style>
        body {
            height: 100%;
            text-align: center;
            background-color: #000;
        }

        /* 弹幕出发的位置 */
        .right {
            position: absolute;
            white-space: nowrap;
            visibility: hidden;
            color: #fff;
            transform: translateX(900px);
        }

        .left {
            position: absolute;
            white-space: nowrap;
            user-select: none;
            font-size: 20px;
            color: #fff;
            transition: transform 8s linear;
        }

        /* 背景 */
        .bcg {
            height: 900px;
            position: relative;
        }

        /* 发送框和发送按钮盒子 */
        .tail {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 0);
            margin: 0 auto;
        }

        /* 发送 */
        #send {
            border: none;
            width: 120px;
            height: 40px;
            background-color: aliceblue;
            border-radius: 8px;
            cursor: pointer;
        }

        /* 发送框 */
        #shuru {
            padding-left: 7px;
            width: 500px;
            height: 35px;
        }

        /* 隐藏 */
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="bcg">
        <div class="tail">
            <input type="text" id="shuru">
            <button id="send" onclick="">发送</button>
        </div>
    </div>
    <script>
        const MAN_DO_CONUT = 6;     //每行的弹幕个数
        const CHANNEL_COUNT = 10;   //频道数
        var DO_Height = 50;         //弹幕间隔高度
        var danmuPool = [];         //弹幕池
        var domPool = [];           //dom元素池
        var pindaoSwitch = [];       //频道开关
        function init() {
            let wrapper = document.querySelector(".bcg");
            for (let i = 0; i < CHANNEL_COUNT; i++) {
                let doms = [];
                for (let j = 0; j < MAN_DO_CONUT; j++) {
                    // 创建dom元素存放弹幕
                    let dom = document.createElement('span');
                    wrapper.appendChild(dom);
                    // 初始化dom的位置 通过设置className
                    dom.className = 'right';
                    dom.style.top = i * DO_Height + 'px';
                    // 放入该通道的DOM池
                    doms.push(dom);
                    // 添加动画结束事件
                    dom.addEventListener('transitionend', () => {
                        dom.className = 'right';
                        // dom.style.transition = null;
                        // dom.style.left = null;
                        dom.style.transform = null;
                        domPool[i].push(dom);
                    });
                }
                domPool.push(doms);
            }
            // 初始化频道开关
            for (let i = 0; i < CHANNEL_COUNT; i++) {
                pindaoSwitch[i] = true;
            }
        }
        // 发送弹幕
        function shootDanmu(dom, text, channel) {
            dom.innerText = text;
            dom.style.transform = `translateX(-1000px)`;
            dom.className = 'left';

            pindaoSwitch[channel] = false;
            // 弹幕全部显示之后 才能开始下一条弹幕
            setTimeout(() => {
                pindaoSwitch[channel] = true;
            }, dom.clientWidth * 10 + 1000);
        }

        // 获取一个可以发送的频道
        function getPindao() {
            for (let i = 0; i < CHANNEL_COUNT; i++) {
                if (pindaoSwitch[i] && domPool[i].length) return i;
            }
            return -1;
        }

        window.onload = function () {
            init();
            // 为input和button添加事件监听
            let btn = document.getElementsByTagName('button')[0];
            let input = document.getElementsByTagName('input')[0];
            btn.addEventListener('click', () => {
                input.value = input.value.trim();
                if (input.value) danmuPool.push(input.value);
                input.value = '';
            })
            input.addEventListener('keyup', (e) => {
                if (e.key === 'Enter' && (input.value = input.value.trim())) {
                    danmuPool.push(input.value);
                    input.value = '';
                }
            })
            // 每隔100ms从弹幕池里获取弹幕（如果有的话）并发射
            setInterval(() => {
                // 获取可以发送的频道
                let channel = getPindao();
                if (danmuPool.length && (channel != -1)) {
                    let dom = domPool[channel].shift();
                    let danmu = danmuPool.shift();
                    shootDanmu(dom, danmu, channel);
                }
            }, 100);

        }

    </script>
</body>

</html>